<template>
	<view class="backBg">
		<!-- <view class="mysd">
			<image src="/static/shandian.png" mode=""></image>
			我的闪电：{{surplus}}
		</view> -->
		<view class="flex-warp-box">
			<view class="mingjl" v-for="(item,index) in 9" @click="setCkalo">
				<image src="/static/cardlm.png" mode=""></image>
			</view>
		</view>
		<view class="mysd">
			<!-- <image src="/static/shandian.png" mode=""></image> -->
			我的抽奖次数：{{surplus}}
		</view>
		<view class="mysd mysd1" style="margin-top: 44rpx;" @click="togoMxz">
			抽奖记录
		</view>
		<u-modal v-model="show" :title="title" :content='content' @confirm="show=false"></u-modal>
	</view>
</template>

<script>
	// import {
	// 	get_flash,
	// 	set_flash
	// } from "@/api/api.js"
	export default {
		data() {
			return {
				title: "抽奖提示",
				content: "你的抽签次数已使用完",
				show: false,
				info: {},
				surplus: 0
			}
		},
		created() {
			this.getFlash()
		},
		methods: {
			setCkalo() {
				let that = this
				uni.showModal({
					title: '抽奖提示',
					content: '是否消耗一次机会进行抽奖?',
					success: function(res) {
						if (res.confirm) {
							that.$http("api/draw/drawstart").then(res => {
								that.show = true
								that.content = '恭喜获得' + res.prize
								that.getFlash()
							}).catch(res => {
								that.getFlash()
							})


							// set_flash().then(res => {
							// 	that.show = true
							// 	that.content = res.data.prize
							// 	that.getFlash()
							// }).catch(res => {
							// 	that.getFlash()
							// })
						} else if (res.cancel) {
							uni.switchTab({
								url: "/pages/user/index"
							})
						}
					}
				});
			},
			getFlash() {
				this.$http("api/draw/get_flash").then(res => {
					// console.log(res, 1111111)
					this.surplus = res.surplus
				})
			},
			togoMxz() {
				uni.navigateTo({
					url: "./choujl"
				})
			}
		}
	}
</script>

<style lang="scss">
	.mingjl {
		background-color: #212121;
		width: 134rpx;
		height: 186rpx;
	}

	.flex-warp-box {
		margin: 230rpx 120rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 33%;
			margin-bottom: 40rpx;

			image {
				height: 102rpx;
				width: 109rpx;
			}
		}
	}


	.mysd {
		border-radius: 32rpx;
		border: 4rpx solid #fff;
		font-size: 32rpx;
		color: #E4E4E4;
		margin: 130rpx auto 0rpx;
		width: 402rpx;
		height: 66rpx;
		background: #0051D1;
		// background: url("../../static/draw-1.png") no-repeat;
		background-size: 100% 100%;
		// border-radius: 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.backBg {
		padding-top: 220rpx;
		// margin-bottom: 24rpx;
		background-image: url("../../static/pageBg.jpg");
		width: 100%;
		min-height: 100vh;
		background-size: 100% 100%;
	}
</style>
